<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_页面固定广告条</title>
    <style>
        .top{
            background-color: #5AA4AE;
            height: 120px;
            color: #fff;
            font-size: 30px;
            position: fixed;
            top: 0;
            width: 100vw;
        }
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left{
            background-color: #FFF799;
            left: 20px;
        }
        .right{
            background-color: #F35336;
            right: 20px;
        }
        .main{
            margin-top: 130px;
        }
    </style>
</head>
<body>
<div class="top">顶部广告条</div>
<div class="left">左侧广告条</div>
<div class="right">右侧广告条</div>
<div class="main">
    内容：
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, cumque eligendi enim error fuga illo
        minus nulla repellendus, repudiandae, saepe sequi tenetur unde ut. Ab alias aliquam ducimus quo vitae.
    </div>
    <div>Debitis ipsam mollitia ut voluptates. Assumenda aut autem beatae delectus dolore inventore laudantium nulla
        omnis optio, quidem sapiente suscipit? Asperiores assumenda doloribus esse expedita impedit iusto labore
        maiores perferendis sed.
    </div>
    <div>Asperiores aut dignissimos error exercitationem nemo. Natus qui quo rerum tenetur? Accusamus alias
        architecto asperiores dicta dignissimos minima natus pariatur, perferendis porro possimus quam quasi quis
        quod ratione repellendus voluptatibus.
    </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi delectus dolore iste praesentium
        repellendus voluptatibus? Aspernatur autem eaque fugiat illo illum ipsam officia, omnis perspiciatis quaerat
        quasi quidem recusandae!
    </div>
    <div>Cumque, dolores doloribus ea earum explicabo facere illo illum laborum magni maxime molestiae officiis
        placeat praesentium quas quasi quibusdam quidem reprehenderit saepe sed sequi similique temporibus veniam
        veritatis voluptates voluptatibus?
    </div>
    <div>A harum officia quis reiciendis. Accusantium consectetur ducimus eligendi, excepturi facere mollitia nemo
        provident repellendus sint, sit sunt, tempora voluptas. Alias consequatur corporis dicta ipsa, iusto nobis
        placeat possimus ullam.
    </div>
    <div>Consequatur magnam neque nulla officiis repudiandae saepe tempora voluptatum! Architecto consequuntur est
        excepturi maxime nemo reiciendis voluptates. Delectus distinctio eligendi enim minima necessitatibus optio
        provident quam quasi, quibusdam, quisquam, rerum.
    </div>
    <div>Ab accusantium aliquam aliquid animi, assumenda deleniti dolor doloribus earum eligendi enim esse fugiat in
        incidunt magni maiores molestiae molestias optio pariatur perferendis quae quos rem suscipit tenetur veniam
        voluptas.
    </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, cumque eligendi enim error fuga illo
        minus nulla repellendus, repudiandae, saepe sequi tenetur unde ut. Ab alias aliquam ducimus quo vitae.
    </div>
    <div>Debitis ipsam mollitia ut voluptates. Assumenda aut autem beatae delectus dolore inventore laudantium nulla
        omnis optio, quidem sapiente suscipit? Asperiores assumenda doloribus esse expedita impedit iusto labore
        maiores perferendis sed.
    </div>
    <div>Asperiores aut dignissimos error exercitationem nemo. Natus qui quo rerum tenetur? Accusamus alias
        architecto asperiores dicta dignissimos minima natus pariatur, perferendis porro possimus quam quasi quis
        quod ratione repellendus voluptatibus.
    </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi delectus dolore iste praesentium
        repellendus voluptatibus? Aspernatur autem eaque fugiat illo illum ipsam officia, omnis perspiciatis quaerat
        quasi quidem recusandae!
    </div>
    <div>Cumque, dolores doloribus ea earum explicabo facere illo illum laborum magni maxime molestiae officiis
        placeat praesentium quas quasi quibusdam quidem reprehenderit saepe sed sequi similique temporibus veniam
        veritatis voluptates voluptatibus?
    </div>
    <div>A harum officia quis reiciendis. Accusantium consectetur ducimus eligendi, excepturi facere mollitia nemo
        provident repellendus sint, sit sunt, tempora voluptas. Alias consequatur corporis dicta ipsa, iusto nobis
        placeat possimus ullam.
    </div>
    <div>Consequatur magnam neque nulla officiis repudiandae saepe tempora voluptatum! Architecto consequuntur est
        excepturi maxime nemo reiciendis voluptates. Delectus distinctio eligendi enim minima necessitatibus optio
        provident quam quasi, quibusdam, quisquam, rerum.
    </div>
    <div>Ab accusantium aliquam aliquid animi, assumenda deleniti dolor doloribus earum eligendi enim esse fugiat in
        incidunt magni maiores molestiae molestias optio pariatur perferendis quae quos rem suscipit tenetur veniam
        voluptas.
    </div>

</div>
</body>
</html>